import React from 'react';
import { useAuth } from '@/hooks/useAuth';

export default function AuthTest() {
  const { user, isAuthenticated, isAdmin } = useAuth();

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-2xl mx-auto bg-white rounded-lg shadow p-6">
        <h1 className="text-2xl font-bold mb-6">认证状态测试</h1>
        
        <div className="space-y-4">
          <div>
            <label className="font-medium">认证状态:</label>
            <span className={`ml-2 px-2 py-1 rounded text-sm ${
              isAuthenticated ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
            }`}>
              {isAuthenticated ? '已登录' : '未登录'}
            </span>
          </div>

          <div>
            <label className="font-medium">管理员权限:</label>
            <span className={`ml-2 px-2 py-1 rounded text-sm ${
              isAdmin() ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
            }`}>
              {isAdmin() ? '是管理员' : '非管理员'}
            </span>
          </div>

          <div>
            <label className="font-medium">用户信息:</label>
            <pre className="mt-2 p-4 bg-gray-100 rounded text-sm">
              {JSON.stringify(user, null, 2)}
            </pre>
          </div>

          <div>
            <label className="font-medium">本地存储:</label>
            <pre className="mt-2 p-4 bg-gray-100 rounded text-sm">
              {JSON.stringify({
                access_token: localStorage.getItem('access_token')?.substring(0, 20) + '...',
                user_info: localStorage.getItem('user_info'),
                token_expires_at: localStorage.getItem('token_expires_at')
              }, null, 2)}
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
}
